import React from 'react';
import {web3, getCourseContract, saveImageToIpfs, ipfsPrefix} from '../config';
import {Row, Col, Form, Button, Badge, Upload} from 'antd';
const FormItem = Form.Item;

class Detail extends React.Component {
    constructor(props) {
        super(props);
        console.log("Detail.js--props",this.props);
        this.state = {
            address: this.props.match.params.address,
            showAll: true
        };
        this.init();
    }
    async init(){
        const [account] = await web3.eth.getAccounts();
        const contract = getCourseContract(this.state.address);
        const detail = await contract.methods.getDetail().call({from: account});
        let [name, content, target, fundingPrice, price, img, video, count, isOnline, role] = Object.values(detail);
        this.setState({
            account,
            name,
            content,
            img,
            video,
            count,
            isOnline,
            role,
            target:web3.utils.fromWei(target),
            fundingPrice:web3.utils.fromWei(fundingPrice),
            price:web3.utils.fromWei(price)
        })
    }

    buy = async () => {
        const contract = getCourseContract(this.state.address);
        //实际购买金额
        const buyPrice = this.state.isOnline ? this.state.price : this.state.fundingPrice;
        await contract.methods.buy()
            .send({
                from: this.state.account,
                value: web3.utils.toWei(buyPrice),
                gas: '6000000'
            });
        this.init()
    };
    //上传
    handleUpload= async(file)=>{
        const hash = await saveImageToIpfs(file);
        const contract = getCourseContract(this.state.address);
        //把文件hash保存到区块链
        await contract.methods.addVideo(hash).send({
            from: this.state.account,
            gas: '6000000'
        });
        this.init()
    }



    render() {
        const formItemLayout = {
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 10
            }
        };
        return (
            <Row type='flex' justify="center" style={{marginTop:"30px"}}>
                <Col span={20}>
                    <Form>
                        <FormItem {...formItemLayout} label="课程名">
                            {this.state.name}
                        </FormItem>
                        <FormItem {...formItemLayout} label="课程简介">
                            {this.state.content}
                        </FormItem>
                        <FormItem {...formItemLayout} label="众筹目标">
                            {this.state.target} ETH
                        </FormItem>
                        <FormItem {...formItemLayout} label="众筹价格">
                            {this.state.fundingPrice} ETH
                        </FormItem>
                        <FormItem {...formItemLayout} label="上线价格">
                            {this.state.price} ETH
                        </FormItem>
                        <FormItem {...formItemLayout} label="支持人数">
                            {this.state.count}
                        </FormItem>

                        <FormItem {...formItemLayout} label="状态">
                            {this.state.isOnline ? <Badge count="已上线"></Badge>
                                :<Badge count="众筹中"></Badge>}
                        </FormItem>
                        {/*身份*/}
                        <FormItem {...formItemLayout} label="身份">
                            {
                                this.state.role==='0' && <Upload beforeUpload={this.handleUpload} showUploadList={false}>
                                    <Button type='primary'>上传视频</Button>
                                </Upload>
                            }
                            {
                                this.state.role==='1' && "已购买"
                            }
                            {
                                this.state.role==='2' && "学员"
                            }
                        </FormItem>
                        <FormItem {...formItemLayout} label="视频状态">
                            {this.state.video?(
                                this.state.role=='2'?"已上传": <video controls width='300px' src={`${ipfsPrefix}${this.state.video}`}></video>
                            ):"等待讲师上传"}
                        </FormItem>
                        <FormItem {...formItemLayout} label="购买">
                            {
                                this.state.role==='2' &&(
                                    <Button type='primary' onClick={this.buy}>
                                        支持{this.state.isOnline?this.state.price:this.state.fundingPrice}ETH
                                    </Button>
                                )
                            }
                        </FormItem>
                    </Form>
                </Col>

            </Row>
        )
    }

}

export default Detail

//                             课程状态为众筹中  课程状态为已上线   此时课程价格
//                                                                 已经变为上线价格
//账号余额     课程创建之后    购买者1购买之后  购买者2购买之后        购买者3购买之后（ceo一成，讲师9成分成）
// 合约创建者     7.993629ETH   7.993629ETH      7.993629ETH      8.073629ETH
// 讲师1号        3.998772ETH   3.998772ETH      4.998772ETH     5.718772ETH
// 购买者1号      5.999664ETH    5.499601         5.499601ETH    5.499601ETH
// 购买者2号      1Eth         1ETH               0.499923ETH      0.499923ETH
// 购买者3号                                                   1ETH>>>0.199936ETH